<template>
	<view class="order">
		
		<view class="nav-card">
			<view class="nav-list">
				<view class="nav-item">
					<image class="nav-item-image" src="@/static/images/index/icon1.png" @click="goPath('/pages/order/text-list?m_type=3')"></image>
					<view>领取必读</view>
				</view>
				<view class="nav-item" @click="goPath('/pages/order/text-list?m_type=2')">
					<image class="nav-item-image" src="@/static/images/index/icon2.png"></image>
					<view>重要通知</view>
				</view>
				<view class="nav-item" @click="txtNavBtn(7)">
					<image class="nav-item-image" src="@/static/images/index/icon3.png"></image>
					<view>一证通查</view>
				</view>
				<view class="nav-item" @click="txtNavBtn(6)">
					<image class="nav-item-image" src="@/static/images/index/icon4.png"></image>
					<view>商务合作</view>
				</view>
			</view>
			
			<view class="banner-list">
				<u-swiper :list="bannerList" height="280" name="image_text" @click="bannerBtn"></u-swiper>
			</view>
			
			<view class="notice-list">
				<u-icon name="volume-up-fill" color="#f19d38" style="margin-left: 20rpx;"></u-icon>
				<view class="notice-list-swiper">
					<u-swiper
					:list="noticeList" 
					height="65" 
					name="image_text" 
					@click="msgInfo" 
					title 
					indicator-pos="none"
					:title-style="{backgroundColor: '#fcf6ed', color: '#f19d38'}"></u-swiper>
				</view>
				
			</view>
		</view>
		
		<!-- <view class="team_top">
			<view class="header-card">
				<view class="words">
					<view class="title">重要通知</view>
					<view class="item">①严禁买卖、出租电话卡；严禁渉诈涉扰；</view>
					<view class="item">②用于电销需录音报备；次月28日前禁止销户；</view>
					<view class="item">③恶意诱导用户注销，追回双倍佣金并承担运营商罚款，情节严重的报送公安机关；</view>
				</view>
			</view>
			
		</view> -->
		<u-modal v-model="show" :content="content"></u-modal>

		<!-- <view style="height: 460rpx;"></view> -->
		<!--  -->
		<view class="nav">
			<u-tabs :list="navList" height='88' active-color='#26C281' inactive-color='#222222' :is-scroll="false"
				:current="current" @change="navChange"></u-tabs>
			<view class="search-nav">
				<u-input placeholder="请输入产品名称/归属地/结算时间" v-model="nameKey"  maxlength="40" border></u-input>
				<u-button shape="circle" class="btn confirm" @click="search">查询</u-button>
			</view>	
		</view>
		<view class="container_box">
			<view class="no_html" v-if="list.length==0">
						<image src="@/static/images/no_img5.png" mode=""></image>
						<text>暂无信息</text>
					</view>
					<view class="no_html" v-else>
						<view class="list" v-for="(item,index) in list" :key="index" @click="detailsBtn(item.id)">
							<view class="list_top">
								<view class="text">
									<text class="color2">{{item.cate_id_text}}-{{item.id}}</text>
								</view>
								<view class="name one-txt-cut">{{item.user_name}}</view>
								<view class="details">资费详情 > </view>
							</view>
							<view class="goods_info">
								<view class="image">
									<image :src="item.photos" mode="aspectFill"></image>
								</view>
								<view class="info">
									<view class="info-item">
										<view class="info-item-text info-item-text1" v-if="item.is_extend == 2">主推</view>
										<view class="info-item-text info-item-text2" @click.stop="cyTuiObj(item)">{{item.jie_title}}</view>
										<view class="info-item-text info-item-text3" @click.stop="goDetails(item)">禁发地区</view>
									</view>
									<!-- <view class="tip">
										<text>佣金：{{item.junior_rebate}}</text>
									</view> -->
									<view class="tip-text">{{item.name}}</view>
									<view class="tips-box" v-if="false">
										<view class="tips-item aaa" style="color: darkgreen;" v-if="item.bxhf_text">
											报销话费{{item.bxhf_text}}
										</view>
										<view class="tips-item bbb" @click.stop="handleGy">
											佣金{{item.junior_rebate}} 
											<u-icon name="question-circle-fill" color="#df5b1e" style="margin-left: 10rpx;"></u-icon>
										</view>
										<!-- <view class="r-btn" @click.stop="receiptFour(item.id)">下级佣金</view> -->
									</view>
									<view class="card-list">
										<view class="card-list-item">
											<view class="item-num">
												<text class="item-num">{{item.bxhf_text || '0.00'}}</text>
												<text class="item-num-red">{{item.ciyue_set_meal || '0.00'}}</text>
												<text class="item-num-redtwo">{{item.one_commission || '0.00'}}</text>
											</view>
											<view class="item-title" @click.stop="handlePopup(0, item.id)">
												自购奖励
												<u-icon name="question-circle-fill" color="#df5b1e" style="margin-left: 5rpx;"></u-icon>
											</view>
										</view>
										<view class="card-list-item">
											<view>
												
												<text class="item-num">{{item.junior_contribution || '0.00'}}</text>
											</view>
											<view class="item-title" @click.stop="handlePopup(1, item.id)">
												推广奖励
												<u-icon name="question-circle-fill" color="#df5b1e" style="margin-left: 5rpx;"></u-icon>
											</view>
										</view>
										<view class="card-list-item" @click.stop="handlePopup(2, item.id)">
											<view>
												<text class="item-num">{{item.pplots_yunying_profit || '0.00'}}</text>
												<text class="item-num-red">{{item.pplots_profit || '0.00'}}</text>
											</view>
											<view class="item-title">
												运营奖励
												<u-icon name="question-circle-fill" color="#df5b1e" style="margin-left: 5rpx;"></u-icon>
											</view>
										</view>
									</view>
									<!-- <view class="tips-box">
										<view class="tips-item bbb">
											{{item.age}}
										</view>
										<view class="tips-item bbb">
											最高佣金{{item.junior_rebate}} 
										</view>
										<view class="r-btn" @click.stop="receiptFour(item.id)">下级佣金</view>
									</view> -->
									<!-- <view class="pro-item">月租：{{item.monthly}}</view>
									<view class="pro-item">包含：{{item.flow}}</view> -->
			<!-- 						<view class="pro-item">年龄：{{item.age}}</view>
									<view class="pro-item">充值要求：{{item.demand}}</view> -->
								</view>
							</view>
							<view class="call-minutes">
								<view>{{item.user_memo}}</view>
								<!-- <view class="call-btn" @click.stop="dianji(item.bxhf_text,item.junior_rebate,'立即下单')">立即领取</view> -->
							<view class="call-btn" @click="detailsBtn(item.id)">立即领取</view>
							</view>
							<!-- <view class="tip_txt1">
								<view class="left">共1种商品</view>
								<view class="right">
									<text class="txt1">合计：</text>
									<text class="txt2">￥</text>
								</view>
							</view> -->
							<view class="list_btn" v-if="false">
								<!-- 仓储才有 -->
								<text class="btn1" @click.stop="dianji(item.xiadanxuzhi,'领卡须知')">领卡须知</text>
								<!-- <text class="btn1" @click.stop="detailsBtn(item.id)">立即下单</text> -->
								<text class="btn1" @click.stop="dianji(item.bxhf_text,item.junior_rebate,'立即下单')">立即下单</text>
								<text class="btn1" @click.stop="copyBtn(item.web_url_text)">分享链接</text>
								<text class="btn1" @click.stop="createBanner(item)">分享海报</text>
								<!-- <text class="btn1" @click.stop="">下架</text> -->
							</view>
						</view>
					</view>
		</view>
		<view class="mall_loading" v-if="list.length">
			<u-loadmore :status="status" color='#999' />
		</view>
		<u-popup v-model="gyShow" mode="center" border-radius="16" width="590rpx" height="1000rpx">
			<view class="gy-center-title">提示</view>
			<view class="gy-center gy-content">
				<view class="gy-center-p gy-center-p-border">
					一、报销话费的前提是您次月不能销户、不能携号转网、不能停机，否则不予报销话费。此处显示的报销话费金额为今日通过订单中心--待充值上传正确的充值详情截图可得到的报销金额（具体报销金额为您激活充值当月实付套餐费+后两个月套餐费）
					</view>
				<view class="gy-center-p gy-center-p-border">二、佣金是您直接下单、推荐他人下单、发展下级下单，我们向您支付的信息服务费。获得的前提是下单的号码正确上传充值详情截图后3-4个工作日（如果次月底前改号码发生携号转网、停机、销户等情况，发放的佣金我们将追回），具体标准为：</view>
				<view class="gy-center-p">①必须成为推广员才有佣金（普通用户成功领取一单就升级为推广员）；</view>
				<view class="gy-center-p">②推广员直推成功的订单或者下级成功的订单达到5单，升级为代理，代理有佣金+团队激励奖金；团队激励奖金标准：直接下级成功完成一单，您得到5元；间接下级成功完成一单，您得到3元。</view>
				<view class="gy-center-p  gy-center-p-border">③您成为代理人（自己下单并完成充值或者分享单一卡品链接/海报给他人，他人下单并完成充值，总量达到5单，即可升级为代理），开始佣金+团队激励权限；团队激励标准：直接下级成功完成一单，您得到5元；间接下级成功完成一单，您得到3元。</view>
				<view class="gy-center-p">下级越多，您躺赚的佣金越多，上不封顶。多多邀请好友吧！</view>
			</view>
			<view class="gy-bottom" @click="gyShow = false">关闭</view>
		</u-popup>
		<u-popup v-model="goodsShow" mode="center" border-radius="16" width="590rpx" height="600rpx">
			<view class="gy-center-title">新产品上架通知</view>
			<scroll-view :scroll-y="true" class="gy-center goods-tz-content">
				<!-- <view class="gy-center-p">
					
				</view> -->
				<u-parse class="gy-center-p" :html="goodsTongzhi"></u-parse>
			</scroll-view>
			<view class="gy-bottom" @click="goodsShow = false">稍后查看</view>
		</u-popup>
		<!-- 推广有奖 -->
		<u-popup v-model="tuiShow" mode="center" border-radius="16" width="590rpx" height="600rpx">
			<view class="gy-center-title">{{tuiObj.title}}</view>
			<scroll-view :scroll-y="true" class="gy-center goods-tz-content"> 
				<u-parse class="gy-center-p" :html="tuiObj.content"></u-parse>
			</scroll-view>
			<view class="gy-bottom tui-bottom">
				<view class="bottom-btn" style="color: #666;" @click="tuiShow = false">我知道了</view>
				<view class="bottom-btn" v-if="tuiObj.path" @click="popupGoPath(tuiObj.path)">{{ tuiObj.rightText }}</view>
			</view>
		</u-popup>
		
		<u-popup v-model="detailsShow" mode="center" border-radius="16" width="600rpx" height="600rpx">
			<view class="gy-center-title">下单限制</view>
			<scroll-view :scroll-y="true" class="gy-center goods-tz-content"> 
				<view v-for="item in detailsList" class="details-list">
					<view class="details-title">{{item.title}}</view>
					<view>{{item.intro}}</view>
				</view>
			</scroll-view>
			<view class="gy-bottom tui-bottom">
				<view class="bottom-btn" style="color: #666;" @click="detailsShow = false">我知道了</view>
			</view>
		</u-popup>
		
		<!-- 确认收货 -->
		<ConfirmReceipt ref="confirm_receipt" @submit='submitBtn'></ConfirmReceipt>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import ConfirmReceipt from '@/components/confirm_receipt/confirm_receipt.vue';
	import orderDetailspop from './order_detailspop';
	export default {
		components: {
			ConfirmReceipt,
			orderDetailspop
		},
		data() {
			return {
				navList: [{
					name: '精选'
				}, {
					name: '电信'
				}, {
					name: '联通'
				}, {
					name: '移动'
				},
				{
					name: '福利'
				}
				],
				current: 0,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				page: 1,
				list: [],
				ids: '',
				user_info: [],
				visible: false,
				show: false,
				content: '',
				bannerList: [],
				noticeList: [],
				townoticeList:[],
				gyShow: false,
				goodsShow: false,
				goodsTongzhi: '',
				nameKey: '',
				
				tuiList: [
					{title: '报销话费', rightText: '报销话费', content: '报销话费----'},
					{title: '推广有奖', rightText: '去推广', content: '下级越多，您躺赚的佣金越多', path: 'details'},
					{title: '申请成为运营商', rightText: '申请成为运营商', content: '下级越多，您躺赚的佣金越多', path: 'apply-operator'},
					// {title: '提示', rightText: '确定', content: ''},
				],
				tuiObj: {},
				tuiShow: false,
				tuiType: 0,
				detailsShow: false,
				detailsList: [],
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			}),
		},
		onShow() {

		},
		onLoad(opt) {
			this.page = 1
			this.ids = opt.ids;
			this.getList()
			this.shopInfo()
			this.getBanners()
			this.getMsgsend()
			this.indexConfig()
		},
		onHide() {
			this.$refs.confirm_receipt.closeBtn()
		},
		methods: {
			filterHTML(html) {
				return html.replace(/<[^<>]+>/g,'');
			},
			indexConfig() {
				this.$httpApi.indexConfig().then((res) => {
					this.tuiList[0].content = res.data.baoxiao
					this.tuiList[1].content = res.data.tgyj
					this.tuiList[2].content = res.data.operate_jiangli
					console.log(this.tuiList)
				})
			},
			getMsgsend() {
				this.$httpApi.Msgsend().then((res) => {
					if (res.code == 1) {
						// this.noticeList = res.data.map(item => this.filterHTML(item.title))
						this.noticeList = res.data
						// this.townoticeList = res.data;
					}
				})
			},
			// 次月结算弹窗
			cyTuiObj(data) {
				this.tuiShow = true
				this.tuiObj = {
					title: '提示',
					content: data.jie_content
				}
			},
			goDetails(item) {
				this.detailsShow = true
				this.detailsList = JSON.parse(item.zfsm)
			},
			handlePopup(type, id) {
				this.tuiShow = true
				this.tuiType = type
				this.tuiObj = this.tuiList[type]
				this.tuiObj.id = id
			},
			popupGoPath(path) {
				if(path === 'details') {
					uni.navigateTo({
						url:'/pages/order/CreatePoster'
					})
					// this.detailsBtn(this.tuiObj.id)
				} else if(path === 'apply-operator') {
					uni.navigateTo({
						url:'/pages/order/apply-operator'
					})
				}else if(path === 'CreatePoster'){
					uni.navigateTo({
						url:'/pages/order/CreatePoster'
					})
				}
				this.tuiShow = false
				this.tuiObj = {}
			},
			handleGy() {
				this.gyShow = true
			},
			getBanners() {
				this.$httpApi.GetBanners().then((res) => {
					this.bannerList = res.data
				})
			},
			
			/**
			 * 滚动到顶部
			 */
			async autoScroll() {
				let el = await this.getDom('.team_top')
				console.log(el.height);
				uni.pageScrollTo({
					scrollTop:el.height,
					duration:300,
					fail( e ) {
						console.log( e  );
					}
				})
			},
			
			/**
			 * 获取dom元素对象
			 */
			async getDom( domSelect ) {
				return new Promise((resolve,reject) => {
					let query = uni.createSelectorQuery().in(this)
					query.select(domSelect).boundingClientRect( ret => {
						resolve( ret )
					}).exec()
				})
			},
			
			copyBtn(txt) {

				uni.setClipboardData({
					data: txt,
					success: function() {
						console.log('success');
					}
				});
			},
			
			txtNavBtn(type){
				uni.navigateTo({
					url:'/pages/other/text?type='+type
				})
			},
			// 获取用户信息
			shopInfo() {
				var that = this
				that.$tips.showLoading('加载中')
				that.$httpApi.userShop().then((res) => {
					that.$tips.hideLoading()
					if (res.code == 1) {
						that.user_info = res.data.userinfo;
						that.spread = res.data.spread
					}
				})
			},
			
			bannerBtn(index){
				uni.navigateTo({
					url:'/pages/shop/banner_details?id='+this.bannerList[index].id
				})
			},
			msgInfo(index){
				uni.navigateTo({
					url:'/pages/other/text?type=8&ids='+this.noticeList[index].id
				})
			},
			// 列表
			getList() {
				var that = this
				if (that.page == 1) {
					that.$tips.showLoading('加载中')
				} else {
					that.status = 'loading'
				}
				var params = {
					page: that.page,
					agent_id: this.ids,
					cate_id: that.current ? that.current : '',
					name: this.nameKey
				}
				that.$httpApi.orderListGoods(params).then((res) => {
					if (res.code == 1) {
						if (that.page == 1) {
							that.list = []
							that.$tips.hideLoading()
						}
						if (res.data.current_page == res.data.last_page) {
							that.status = 'nomore'
						} else {
							that.status = 'loadmore'
						}
						that.list = that.list.concat(res.data.data)
						
						this.goodsShow = res.data.flag
						this.goodsTongzhi = res.data.tongzhi
					}
				})
			},
			
			goPath(url) {
				uni.navigateTo({
					url: url
				})
			},

			detailsBtn(ids) {
				uni.navigateTo({
					url: '/pages/order/order_details?id=' + ids + '&agid=' + this.user_info.id
				})
			},

			// 切换
			navChange(index) {
				this.current = index
				this.page = 1
				this.getList()
				this.autoScroll()
			},
			search() {
				this.page = 1
				this.getList()
			},
			// 查看物流
			logisticsBtn(val) {
				uni.navigateTo({
					url: '/pages/other/logistics?order=' + val
				})
			},
			// 联系店长
			phoneBtn(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},

			/**
			 * 生成海报
			 */
			createBanner(item) {
				let {
					id,
					packages_id
				} = item
				uni.navigateTo({
					url: `/pages/order/CreateBanner?id=${id}&packages_id=${packages_id}`
				})
			},



			// 联系客服
			kfBtn() {
				uni.navigateTo({
					url: '/pages/other/text?type=4'
				})
			},
			// 修改佣金
			receiptFour(val, rebate) {
				this.$refs.confirm_receipt.receiptFour(val)
			},
			dianji(val1,val2, title) {
				this.show = true;
				if(val2=="领卡须知"){
					this.content = val1;
				}else{
					this.content = "下单返"+val1+"元，分享赚"+val2+"元";
				}
				
			},

			tongyi() {
				this.$refs.confirm_receipt.openBtnTwo(this.ids)
			},
			submitBtn() {
				this.page = 1
				this.getList()
			},
		},
		onReachBottom() {
			if (this.status == 'nomore' || this.status == 'loading') {
				return
			}
			this.page++
			this.getList()
		},
	}
</script>

<style lang="less">
	.info-item {
		display: flex;
		align-items: center;
		padding-bottom: 15rpx;
		
		.info-item-text {
			padding: 0 10rpx;
			margin-right: 30rpx;
			color: #fff;
			text-align: center;
			font-size: 26rpx;
			border-radius: 5rpx;
			background-color: #26C281;
		}
		
		.info-item-text1 {
			background-color: #26C281;
		}
		.info-item-text2 {
			background-color: #5da5f8;
		}
		.info-item-text3 {
			background-color: #de813e;
		}
	}
	.details-list {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		
		.details-title {
			width: 150rpx;
			min-width: 150rpx;
			color: #000000;
		}
	}
	.card-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		
		.card-list-item {
			flex: 1;
			text-align: center;
			border-right: 2rpx solid #e5e5e5;
			padding-bottom: 20rpx;
			
			&:last-child {
				border-right: 0;
			}
			
			.item-num {
				display: inline;
				font-size: 30rpx;
				font-weight: 800;
				color: #000000;
				margin-top: 10rpx;
			}
			.item-num-red {
				font-size: 26rpx;
				display: inline;
				color: #ee3f20;
				margin-left: 10rpx;
			}
			.item-num-redtwo {
				font-size: 26rpx;
				display: inline;
				color: #1b4cd3;
				margin-left: 10rpx;
			}
			.item-title {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
	.tui-bottom {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.circle-list {
		display: flex;
		
		.circle-item {
			margin-right: 10rpx;
		}
	}
	.gy-center-title {
		padding: 20rpx 0;
		text-align: center;
		font-weight: 700;
		color: #000000;
	}
	.gy-center {
		padding: 0 30rpx;
	}
	.gy-center-p {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		line-height: 42rpx;
		color: #666;
	}
	.gy-center-p-border {
		border-bottom: 1rpx solid #e5e5e5;
	}
	.gy-content {
		height: 840rpx;
		overflow-y: auto;
	}
	.goods-tz-content {
		height: 430rpx;
		overflow-y: auto;
		box-sizing: border-box;
		cursor: pointer;
	}
	.gy-bottom {
		border-top: 1rpx solid #e5e5e5;
		text-align: center;
		padding-top: 25rpx;
		color: #148EFF;
	}
	.order {
		width: 100%;

		.header-card {
			background: #26C281;
			color: #fff;
			margin: 30rpx;
			line-height: 150%;
			padding: 30rpx;
			border-radius: 10rpx;
			
			.title{font-size:30rpx;font-weight:bold;padding:10rpx 0}
		}
		
		.nav-card {
			background: #fff;
			color: #333;
			
			.nav-list {
				display: flex;
				
				.nav-item {
					flex: 1;
					text-align: center;
					
					.nav-item-image {
						width: 90rpx;
						height: 90rpx;
					}
				}
			}
			
			.banner-list {
				margin: 30rpx 30rpx 0 30rpx;
				padding-bottom: 30rpx;
			}
			.notice-list {
				display: flex;
				margin: 0 30rpx;
				background-color: #fcf6ed;
				border-radius: 20rpx;
			}
			.notice-list-swiper {
				flex: 1;
			}
		}

		.team_top {
			position: relative;
			z-index: 10;
			width: 100%;
			left: 0;
			top: 0;
			background: #fff;
			border-bottom: 2rpx solid #f7f8fa;

			.nav {
				width: 100%;
				height: 88rpx;
			}
		}
		.no_html {
			padding:20rpx 0;
		}

		// 
		.list {
			width: 710rpx;
			background: #fff;
			margin: 0 auto 24rpx auto;

			.list_top {
				width: 100%;
				line-height: 88rpx;
				padding: 0 24rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.details {
					font-size: 26rpx;
					color: #999;
				}

				.text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;

					text {
						display: block;
						margin-right: 10rpx;
						padding: 0 15rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}

					.color1 {
						background: #FFA551;
					}

					.color2 {
						background: #26C281;
					}

					.color3 {
						background: #148EFF;
					}

					.color4 {
						background: #BC171B;
					}
				}

				.right {
					color: #666;
				}

				.right1 {
					color: #FF6230;
				}
			}
			
			.name {
				flex: 1;
				wwidth: 100rpx;
				ppadding: 30rpx;
				width: 100%;
				font-size: 28rpx;
				font-weight: bold;
				color: #222222;
			}
			
			.call-minutes {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 24rpx;
				border-top: 2px solid #f7f8fa;
				
				.call-btn {
					display: block;
					padding: 0 10px;
					height: 34px;
					line-height: 32px;
					color: #fff;
					background: #43A5FF;
					border-radius: 3px;
					font-size: 12px;
				}
			}

			.goods_info {
				width: 100%;
				padding: 24rpx;
				display: flex;

				.image {
					position: relative;
					width: 200rpx;
					height: 200rpx;

					image {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.info {
					margin-top: 10rpx;
					width: calc(100% - 200rpx);
					padding-left: 20rpx;
					
					.tip-text {
						font-size: 28rpx;
						color: #999;
					}
					
					.tips-box{
						
						display:flex;
						justify-content: flex-start;
						align-items: center;
						padding:20rpx 0;
						font-size: 24rpx;
						.tips-item{margin-right:10rpx; border-radius:100rpx;padding:6rpx 20rpx;}
						.aaa{background:#e0ecff;color:#1b4cd3;}
						.bbb{background:#ffebc1;color:#df5b1e;}
					}

					.pro-item {
						color: #666;
						line-height: 160%;
						font-size: 24rpx;
					}

					.tip {
						width: 100%;
						padding-top: 20rpx;
						display: flex;

						text {
							padding: 6rpx 10rpx;
							font-size: 24rpx;
							background: #eee;
							color: #999;
							border-radius: 5rpx;
						}
					}

					.money {
						width: 100%;
						padding-top: 10rpx;
						display: flex;
						align-items: center;

						text {
							padding-right: 32rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}

						.color1 {
							color: #FF6230;
						}

						.color2 {
							color: #26C281;
						}
					}

					.money1 {
						width: 100%;
						padding: 20rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							image {
								display: block;
								width: 40rpx;
								height: 40rpx;
							}

							text {
								padding-left: 5rpx;
								font-size: 24rpx;
								font-weight: 600;
								color: #222222;
							}
						}

						.r-btn {
							background: #26C281;
							color: #fff;
							font-size: 24rpx;
							padding: 10rpx 20rpx;
							border-radius: 4rpx
						}

						.right {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}

					.num {
						width: 100%;
						padding-top: 25rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}

						.right {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}

			.tip_txt1 {
				width: 100%;
				padding: 25rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.right {
					display: flex;
					align-items: center;

					.txt1 {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					image {
						display: block;
						width: 40rpx;
						height: 40rpx;
					}

					.txt2 {
						padding-left: 10rpx;
						font-size: 40rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}

			.tip_txt {
				width: 100%;
				padding: 25rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.txt {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;

					text {
						display: block;
						width: 40rpx;
						height: 40rpx;
						line-height: 39rpx;
						font-size: 24rpx;
						margin-right: 5rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}

					.color1 {
						background: #FF815A;
					}

					.color2 {
						background: #43A5FF;
					}

					.color3 {
						background: #51CE9A;
					}
				}
			}

			.list_btn {
				width: 100%;
				padding: 20rpx 16rpx;
				display: flex;
				justify-content: flex-end;
				border: 2rpx solid #e93323;

				text {
					margin-left: 12rpx;
					margin-right: 12rpx;
					display: block;
					padding: 0 20rpx;
					height: 64rpx;
					line-height: 60rpx;
					border-radius: 6rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}

				.btn1 {
					color: #fff;
					background: #43A5FF;
				}

				.btn2 {
					color: #26C281;
					border: 2rpx solid #26C281;
				}
			}
		}
	}
	
	.search-nav {
		display: flex;
		align-items: center;
		padding: 20rpx;
		
		.btn {
			margin-left: 10rpx;
			width: 160rpx;
			height: 60rpx;
			text-align: center;
		}
		.confirm {
			background-color: #00afaa;
			color: #fff;
		}
	}
</style>